<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DAY2：CSS基础</title>
<style>
*{ margin:0; padding:0;}
body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微软雅黑";}
h1,h2{padding: 20px 0;}
h3{    background: #00AA88;
    color: #FFFCF4;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    border-radius: 4px;
    padding: 5px 0px 5px 15px;}
p{ line-height: 40px;}
ul li{ list-style: none;line-height: 40px;}
span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;}
em{ font-style: normal; color:red;}
.other{ color:#044D22;}
.oo{ color:red; display:inline; font-size:18px; font-weight:normal;}
.marleft{ margin-left:30px;}
.marbtom{ margin:15px 0; font-weight:600;}
.borderbtm{ border-bottom: solid 1px #eee;
				    padding-bottom: 15px;margin-bottom: 15px;}
.textcon{
	    margin: 10px 0;
    border: solid 1px #ddd;
    border-left-width: 6px;
    padding: 10px;
    border-radius: 4px;
    border-color: #f60;
	
}
.oos{ color:#000; font-weight:800;}
</style>
</head>

<body>
<div class="boxs">
	<h1>DAY3：CSS基础</h1>
    <h2 class="borderbtm">学习目标</h2>
    <ul >
    	<li>1、CSS简介</li>
    	<li>2、CSS语法</li>
    	<li>3、样式的创建</li>
    	<li>4、两种引入外部样式表的区别</li>
    	<li>5、样式表的优先级和作用域</li>
    	<li>6、CSS选择器</li>
    	<li>7、选择器的权重</li>
    	<li>8、浮动属性的简单应用</li>
    	<li>9、HTML、CSS注释</li>
    </ul>
    <h3>一、CSS简介</h3>
    <div class="marleft"> css:层叠样式表  英文全名：cascading  style  sheets<br>
      ,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。<br>
      目前推荐遵循的是W3C发布的CSS3.0.<br>
      用来修饰XHTML或者XML等样式文件的计算机语言。<br>
    1998年5月21日由w3C正式推出的css2.0</div>
    <h3>二、CSS语法</h3>
    <div class="marleft">
      <p>CSS语法：选择符{属性：属性值；属性：属性值；}<br>
      <img src="images/pic1.png"/><br>
     <strong class="oo"> 选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.<br>
      属性：属性是指定元素所具有的属性，它是css的核心，css2共有150多个属性<br>
        属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。<br></strong>
        说明：<br>
        1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；<br>
        2）属性必须放在花括号中，属性与属性值用冒号连接。<br>
        3）每条声明用分号结束。<br>
        4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。<br>
        5）在书写样式过程中，空格、换行等操作不影响属性显示。<br>
      </p>
    </div>
    <h3>三、样式的创建(内部样式表   外部样式表   内联样式表)</h3>
    <div class="marleft">
      <p>A、内部样式表</p>
      <blockquote class="textcon">
      <p>语法：<br>
        &lt;style type=&quot;text/css&quot;&gt;<br>
        /*css语句*/<br>
  &lt;/style&gt;</p>
      <p class="oo"> 注：使用style标记创建样式时，最好将该标记写在&lt;head&gt;&lt;/head&gt;;</p>
    
      </p>
      </blockquote>
      <p>B、外部样式 <br>
      <blockquote class="textcon">
        *方法一：外部样式表的创建：<br>
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;目标文件的路径及文件名全称&quot; /&gt;<br>
        说明：<br>
        使用link元素导入外部样式表时，需将该元素写在文档头部，即&lt;head&gt;与&lt;/head&gt;之间。<br>
        rel（relation）：用于定义文档关联，表示关联样式表；<br>
      type：定义文档类型；</p></blockquote>
      <blockquote class="textcon">
      <p>*方法二：外部样式表的导入<br>
        &lt;style type=&quot;text/css&quot;&gt;<br>
@import url(目标文件的路径及文件名全称);<br>
&lt;/style&gt;<br>
<strong class="oo">注：@和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；</strong></p></blockquote>
      <p>C、内联样式 （行间样式，行内样式，嵌入式样式、内嵌样式）</p>
      <blockquote class="textcon">
      <p>语法：&lt;标签    style=&quot;属性：属性值;属性:属性值;&quot;&gt;&lt;/标签&gt;</p>
      <p>例：&lt;div style=&quot;width:500px; height:200px;&quot;&gt;&lt;/div&gt;<br>
      </p>
      </blockquote>
    </div>
    <h3>四、两种引入外部样式表link和import之间的区别</h3>
    <div class="marleft">
      <p class="other">扩展知识点：link和import导入外部样式的区别：</p>
      <blockquote class="textcon">
      <p><strong class="oo">差别1：本质的差别：</strong>link属于XHTML标签，而@import完全是CSS提供的一种方式。 </p>
      <p><strong class="oo">差别2：加载顺序的差别：</strong>当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。<br>
        <strong class="oo">差别3：兼容性的差别：</strong>@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。<br>
     <strong class="oo"> 差别4：使用dom(document  object model文档对象模型 )控制样式时的差别</strong>：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.</p>
    </div>
    <h3>五、样式表的优先级</h3>
    <div class="marleft">
      <p>A、内联样式表的优先级别最高<br>
      B、内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。</p>
      <p>C、作用域：内联样式的作用域最小，只能应用于当前元素，其次是内部样式表，能应用于当前HTML文件，最后是外部样式表，能应用于所有链接的HTML文件。<br>
      </p>
    </div>
    <h3>六、CSS选择符（选择器）:表示要定义样式的对象</h3>
    <div class="marleft">
      <p>1） 元素选择符/类型选择符（element选择器	) &nbsp;&nbsp;如：div{width:100px; height:100px; background:red;}</p>
      <blockquote class="textcon">
      <p>语法：元素名称{属性：属性值；}</p>
      <p>说明：</p>
      <p>a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。</p>
      <p>b)所有的页面元素都可以作为选择符;</p>
      <p>用法：<br>
        1)如果想改变某个元素得默认样式时，可以使用类型选择符；<br>
      （如：改变一个div、p、h1样式）</p>
      <p>2) 当统一文档某个元素的显示效果时，可以使用类型选择符<br>
      （如：改变文档所有p段落样式）</p>
      </blockquote>
      <p class="oo oos">2) id选择器</p>
      <blockquote class="textcon">
      <p>语法：#id名{属性：属性值;}<br>
        说明：<br>
        A）当我们使用id选择符时，应该为每个元素定义一个id属性<br>
        如：&lt;div id=&quot;box&quot;&gt;&lt;/div&gt;<br>
        B）id选择符的语法格式是“#”加上自定义的id名<br>
      如：#box{width:300px; height:300px;}</p>
      <p>C)  起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)<br>
        如：head标记<br>
        D）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。<br>
      E)   最大的用处：创建网页的外围结构。</p></blockquote>
       <strong class="oo oos"> 3）群组选择器</strong><br>
       <blockquote class="textcon">
        语法：选择符1，选择符2，选择符3{属性：属性值;} 例：#top1,#nav1{width:960px;}<br>
      说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。</p>
      </blockquote>
      <p><strong class="oo oos">4）class选择器</strong>/类选择器<br>
      <blockquote class="textcon">
        <p>语法：·class名{属性：属性值;}<br>
        说明：<br>
        A）当我们使用class选择符时，应先为每个元素定义一个class名称<br>
        B）class选择符的语法格式是：</p>
        <p>&quot;如：&lt;div class=&quot;top&quot;&gt;&lt;/div&gt;&quot;</p>
        <p>.top{width:200px; height:100px; background:green;}<br>
          用法：class选择符更适合定义一类样式；</p>
      </p></blockquote>
      <p><strong class="oo oos">5)*通配符</strong>/通配选择器<br>
      <blockquote class="textcon">
        <p>语法：*{属性：属性值；}<br>
          说明：通配选择符的写法是“*”，其含义就是所有元素。</p>
        <p>*{margin:0; padding:0;}代表清除所有元素的默认边距和填充值；</p>
        <p>margin:0 auto;元素的水平居中</p>
      </blockquote>
      
      <p><strong class="oo oos"> 6） 包含选择器</strong>/后代选择器<br>
      <blockquote class="textcon">
        <p>语法：选择符1&nbsp;&nbsp;    选择符2{属性：属性值;}<br>
          说明：含义就是选择符1中包含的所有选择符2;<br>
        用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。</p>
        <p>如：结构：&lt;ul class=&quot;list&quot;&gt;</p>
        <p>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;</p>
        <p>			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;样式 ：&nbsp;.list li{background:red;}</p>
        <p>6.1:子选择器</p>
        <p>语法：选择符1&gt;选择符2{属性：属性值；}</p>
        <p>说明：选择符1中的直接子选择符2</p>
        <p>例：&lt;div&gt;</p>
        <p>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;span&gt;111111111&lt;/span&gt;&lt;/p&gt;</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;2222222&lt;/span&gt;</p>
        <p>&lt;/div&gt;</p>
        <p>div&gt;span{color:red;}只能将内容为222222的span标签改颜色<br>
        </p>
      </blockquote>
<strong class="oo oos">7） 伪类选择器(伪类选择符)</strong><br>
<blockquote class="textcon">
语法 ：<br>
a:link{属性：属性值;}超链接的初始状态;<br>
a:visited{属性：属性值;}超链接被访问后的状态;<br>
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;<br>
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;<br>
<strong class="oo">Link--visited--hover--active。</strong><br>
说明：<br>
A）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：<br>
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；<br>
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；<br>
例如：a{color:red;}     a:hover{color:green;} 表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。 <br></blockquote>
    </div>
    <h3>七、CSS选择符的权重</h3>
    <div class="marleft">
      <p>css中用四位数字表示权重，权重(特殊性)的表达方式如：0，0，0，0<br>
      类型选择符（元素选择器）的权重为0001 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：div{width:100px; height:100px;}<br>
      class选择符的权重为0010&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如：.box{width:100px; height:100px;}<br>
      id选择符的权重为0100</p>
      <p>伪类选择符的权重为0010 &nbsp;&nbsp;&nbsp;&nbsp;如:a:link  a:visited......</p>
      <p>包含选择符的权重：为包含选择符的权重之和<br>
      子选择符的权重为0000(逐个对比)</p>
      <p><br>
      属性选择符的权重为0010<br>
      伪元素选择符的权重为0001 <br>
      内联样式的权重为1000<br>
      继承样式的权重为0000
    <br>
      </p>
  </div>
  <div class="marleft"></div>
    <h3>八、页面中的注释</h3>
    <div class="marleft">
      <p>Html注释<br>
      &lt;!-- 注释内容  --&gt;</p>
      <p><br>
      css的注释<br>
      /* 我是css的注释  */<br>
      <br>
      </p>
  </div>
</div>
<div style="     width: 130px;
    height: 45px;
    line-height: 44px;
    text-align: center;
    color: #f00;
    background: #000;
    border-radius: 4px;
    position: fixed;
    bottom: 50px;
    cursor:pointer;
    right: 10px; "><a href="#" style="color:#f00; text-decoration:none;">返回顶部</a></div>

</body>
</html>
